<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <!-- 搜索 -->
            <el-input v-model="listQuery.Filter" clearable size="small" placeholder="搜索..." style="width: 200px"
                class="filter-item" @keyup.enter.native="handleFilter" />
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search"
                @click="handleFilter">搜索</el-button>

            <div class="opts">
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleCreate"
                    v-permission="['AbpIdentity.Roles.Create']">新增</el-button>
                <el-button class="filter-item" size="mini" type="success" icon="el-icon-edit"
                    v-permission="['AbpIdentity.Roles.Update']" @click="handleUpdate()">修改</el-button>
                <el-button slot="reference" class="filter-item" type="danger" icon="el-icon-delete" size="mini"
                    v-permission="['AbpIdentity.Roles.Delete']" @click="handleDelete()">删除</el-button>
            </div>
        </div>

        <el-row :gutter="20">
            <!--养护列表-->
            <el-col :md="26" style="margin-bottom: 10px">
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix" style="height: 20px">
                        <span class="role-span">全部调拨列表</span>
                    </div>
                    <!--表格渲染-->
                    <el-table ref="multipleTable" v-loading="listLoading" :data="list" size="small" style="width: 100%"
                        @sort-change="sortChange" @selection-change="handleSelectionChange" @row-click="handleRowClick">
                        <el-table-column type="selection" width="44px"></el-table-column>
                        <el-table-column label="调拨日期" prop="createorupdatelibrary[0].dateTransfer" align="center"
                            width="150px">
                            <template v-slot="scope">
                                {{ scope.row.dateTransfer.substr(0, 10) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="序号" prop="createorupdatelibrary[0].number" align="center" width="150px">
                        </el-table-column>

                        <el-table-column label="产品名称" prop="documentName" align="center" width="100px">
                            <template slot-scope="{ row }">
                                <span class="link-type" @click="handleUpdate(row)">{{
                row.documentName
            }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="关联项目" prop="associate" align="center" width="150px">
                        </el-table-column>
                        <el-table-column label="产品编号" prop="documentNumber" align="center" width="150px">
                            <template v-slot="scope">
                                {{ scope.row.documentNumber.substr(0, 5) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="规格型号" prop="createorupdatelibrary[0].sku" align="center" width="150px">
                        </el-table-column>
                        <el-table-column label="单位" prop="createorupdatelibrary[0].unit" align="center" width="150px">
                        </el-table-column>
                        <el-table-column label="申请数量" prop="createorupdatelibrary[0].allocationQuantity" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="审批数量" prop="createorupdatelibrary[0].allocationQuantity" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="出库数量" prop="createorupdatelibrary[0].allocationQuantity" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="批号" prop="createorupdatelibrary[0].batchNumber" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="生产日期" prop="createorupdatelibrary[0].createTime" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="有效日期" prop="createorupdatelibrary[0].validDate" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="包装方式" prop="createorupdatelibrary[0].packing" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="出库仓库" prop="createorupdatelibrary[0].outboundWarehouse" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="入库仓库" prop="createorupdatelibrary[0].incomingWarehouse" align="center"
                            width="150px">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="125">
                            <template slot-scope="{ row }">
                                <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)"
                                    v-permission="['AbpIdentity.Roles.Update']" icon="el-icon-edit" /> -->
                                <el-button type="danger" size="mini" @click="handleDelete(row)"
                                    :disabled="row.name === 'admin'" v-permission="['AbpIdentity.Roles.Delete']"
                                    icon="el-icon-delete" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";


export default {
    name: "curinglist",
    components: { Pagination },
    directives: { permission },
    filters: {

    },
    data() {
        return {
            form: {},
            list: [],
            listLoading: true,
            formLoading: false,
            savePerLoading: false,
            listQuery: {
                Filter: "",
                Sorting: "",
                SkipCount: 0,
                MaxResultCount: 10,
            },
            page: 1,
            dialogFormVisible: false,
            multipleSelection: [],
            formTitle: "",
            isEdit: false,
            checked: false,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // handleChange() {
        //     this.$axios.gets("/api/business/ProductCuring/productMaintenance-list?additionalProp1=string&additionalProp2=string&additionalProp3=string").then((response) => {
        //         this.menuData = response;
        //         //this.menus = response.items.filter((_) => _.pid == null);
        //         //this.setChildren(this.menus, response.items);
        //         this.treeLoading = false;
        //         this.menus = response.items;
        //         console.log(response.items);
        //     });
        // },
        handleNodeClick(data) {
            console.log(data);
        },
        getList() {
            this.listLoading = true;
            this.listQuery.SkipCount =
                (this.page - 1) * this.listQuery.MaxResultCount;
            this.$axios
                .gets("api/business/preciseLibrary/preciseLibrary-get", this.listQuery)
                .then((response) => {
                    console.log(response);
                    this.list = response.items;
                    this.listLoading = false;
                });
        },
        fetchData(id) {
            this.$axios.gets("/api/business/preciseLibrary/preciseLibrary-find?id=" + id).then((response) => {
                this.form = response;
                this.form.pIdArr = response.pIdArr;
            });
        },
        handleFilter() {
            this.page = 1;
            this.getList();
        },
        resetQuery() { },
        save() {

            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    if (this.isEdit) {
                        this.$axios
                            .puts("/api/business/preciseLibrary/preciseLibrary-post/", this.form)
                            .then((response) => {
                                this.formLoading = false;
                                this.$notify({
                                    title: "成功",
                                    message: "更新成功",
                                    type: "success",
                                    duration: 2000,
                                });
                                this.dialogFormVisible = false;
                                this.getList();
                            })
                            .catch(() => {
                                this.formLoading = false;
                            });
                    } else {
                        this.form.pId = this.form.pIdArr[this.form.pIdArr.length - 1];
                        this.$axios
                            .posts("/api/business/preciseLibrary/preciseLibrary-post/", this.form)
                            .then((response) => {
                                this.formLoading = false;
                                this.$notify({
                                    title: "成功",
                                    message: "新增成功",
                                    type: "success",
                                    duration: 2000,
                                });
                                this.dialogFormVisible = false;
                                this.getList();
                            })
                            .catch(() => {
                                this.formLoading = false;
                            });
                    }
                }
            });
        },
        savePer() {
            this.savePerLoading = true;
            let params = {};
            let checkedKeys = this.$refs.tree.getCheckedKeys();
            params.permissions = [];
            this.menuData.forEach((element) => {
                if (element.permission) {
                    let perm = {};
                    perm.name = element.permission;
                    if (checkedKeys.indexOf(element.id) > -1) {
                        perm.isGranted = true;
                    } else {
                        perm.isGranted = false;
                    }
                    params.permissions.push(perm);
                }
            });
            this.$axios
                .puts(
                    "/api/permission-management/permissions?providerName=R&providerKey=" +
                    this.multipleSelection[0].name,
                    params
                )
                .then(() => {
                    this.$axios
                        .puts("/api/business/preciseLibrary/preciseLibrary-post", {
                            roleId: this.multipleSelection[0].id,
                            menuIds: checkedKeys,
                        }).then(() => {
                            this.$notify({
                                title: "成功",
                                message: "更新成功",
                                type: "success",
                                duration: 2000,
                            });
                            this.savePerLoading = false;
                        }).catch(() => {
                            this.savePerLoading = false;
                        });

                })
                .catch(() => {
                    this.savePerLoading = false;
                });
        },
        handleCreate() {
            this.formTitle = "新增分类";
            this.isEdit = false;
            this.form = {};
            this.dialogFormVisible = true;
        },
        handleDelete(row) {
            if (row) {
                this.$confirm("是否删除" + row.documentName + "?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$axios
                            .deletes("/api/business/preciseLibrary/preciseLibrary-delete?ids=" + row.id)
                            .then((response) => {
                                const index = this.list.indexOf(row);
                                this.list.splice(index, 1);
                                this.$notify({
                                    title: "成功",
                                    message: "删除成功",
                                    type: "success",
                                    duration: 2000,
                                });
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            } else {
                this.$alert("暂时不支持角色批量删除", "提示", {
                    confirmButtonText: "确定",
                    callback: (action) => {
                        //
                    },
                });
            }
        },
        handleUpdate(row) {
            this.formTitle = "修改角色";
            this.isEdit = true;

            if (row) {
                this.fetchData(row.value);
                console.log(row);
                this.dialogFormVisible = true;
            } else {
                if (this.multipleSelection.length != 1) {
                    this.$message({
                        message: "编辑必须选择单行",
                        type: "warning",
                    });
                    return;
                } else {
                    this.fetchData(this.multipleSelection[0].value);
                    this.dialogFormVisible = true;
                }
            }
        },
        sortChange(data) {
            const { prop, order } = data;
            if (!prop || !order) {
                this.handleFilter();
                return;
            }
            this.listQuery.Sorting = prop + " " + order;
            this.handleFilter();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleRowClick(row, column, event) {
            if (
                this.multipleSelection.length == 1 &&
                this.multipleSelection[0].id == row.id
            ) {
                return;
            }
            this.treeLoading = true;
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(row);
            this.$axios.gets("api/business/productsType/menu-item-list?productsTypeId=" + row.id).then((response) => {
                this.$refs.tree.setCheckedKeys(response.items);
                this.treeLoading = false;
            });
        },
        setChildren(roots, items) {
            roots.forEach((element) => {
                items.forEach((item) => {
                    if (item.pid == element.id) {
                        if (!element.children) element.children = [];
                        element.children.push(item);
                    }
                });
                if (element.children) {
                    this.setChildren(element.children, items);
                }
            });
        },
        checkedAll() {
            if (this.checked) {
                //全选
                this.$refs.tree.setCheckedNodes(this.menuData);
            } else {
                //取消选中
                this.$refs.tree.setCheckedKeys([]);
            }
        },
        checkNode(data, state) {
            if (!data.pid) {
                // if (state.checkedKeys.indexOf(data.id) === -1) {
                //   data.children.forEach(element => {
                //     this.$refs.tree.setChecked(element.id, false);
                //   });
                // }
            } else {
                if (state.checkedKeys.indexOf(data.id) > -1) {
                    this.$refs.tree.setChecked(data.pid, true);
                }
            }
        },
        cancel() {
            this.dialogFormVisible = false;
            this.$refs.form.clearValidate();
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.opts {
    padding: 6px 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
</style>